<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<script>
    $(function () {

        var authorId = getParams().authorId;

        //查询当前作者的基本信息
        $.get("/users", {id: authorId}, function (data) {
            if (data.success) {
                //设置封面
                $(".bg").css("background-image", "url(" + data.data.coverImgUrl + ")");
                $(".info").renderValues(data.data);
            }
        });
        //查询粉丝数目关注数目
        $.get("/users/" + authorId + "/counts", function (data) {
            if (data.success) {
                var map = data.data;
                // $(".num").renderValues(data.data);
                $("#focus").html(map.focus);
                $("#focused").html(map.focused);
            }

        })
        var user = JSON.parse(sessionStorage.getItem("user"));
        //查询当前用户有无关注当前游记作者

        //查询当前用户
        if (user) {
            $.get("/users/" + user.id + "/focuseds", {focusedId: authorId}, function (focusData) {

                if (focusData.success) {
                    $("#followBtn").toggleClass("btn-success")
                } else {
                    // $("#followBtn").toggleClass("btn-info")
                }

                $("#followBtn").click(function () {
                    if (user.id == authorId) {
                        $(document).dialog({
                            content: '不能关注自己',
                        });
                    } else {
                        if (focusData.success) {
                            $.ajax({
                                url: "/users/" + user.id + "/focuseds",
                                type: "post",
                                data: {focusedId: authorId},
                                success: function (data) {
                                    $(document).dialog({
                                        content: '增加关注',
                                    });
                                    $("#followBtn").addClass("btn-success")
                                    window.location.reload();
                                    // $("#followBtn").html("已关注")
                                }

                            });

                        } else {
                            $.ajax({
                                url: "/users/" + user.id + "/focuseds/" + authorId,
                                type: "delete",
                                success: function (data) {
                                    $(document).dialog({
                                        content: '取消关注',
                                    });
                                    $("#followBtn").addClass("btn-info")
                                    // $("#followBtn").html("关注");
                                    window.location.reload();

                                }
                            });

                        }
                    }


                });
            });
        } else {
            // $("#followBtn").toggleClass("btn-info");
            $("#followBtn").click(function () {
                $(document).dialog({
                    content: '游客,请进行登录',
                });
                location.href = "/login.html";
            });
            $("#letterBtn").click(function () {
                $(document).dialog({
                    content: '游客,请进行登录',
                });
                location.href = "/login.html";
            });
        }
        var currentPage = 1;
        var list;
        var pages;
        //查询所有游记数量
        $.get("/travels/" + authorId + "/numbers", function (data) {
            $("#countTravels").html(data);

        });

        //对页面进行渲染的方法
        function renderView(src, data, destination) {
            $(src).renderValues(data, {
                handle: function (ele, value) {
                    ele.href = destination + value;
                },
                manage:function (ele, value) {
                    //将异步请求变成同步请求,可以回显点赞数
                    $.ajax({
                        url: "/travels/"+value+"/greats",
                        type: "get",
                        data: {greatType:"travel_id"},
                        async: false,
                        success: function (data) {
                            $(ele).html(data.greats)
                        }
                    })
                }
            });
        }

        //查询当前游记作者的所有游记,并进行分页
        $.get("/travels", {"isPublic": true, "state": 2, authorId: authorId}, function (data) {
            pages = data.pages;
            list = data.list;
            renderView($("#travels"), data, "/travelContent.html?id=");
        });


        $(window).scroll(function () {
            if (isEnd()) {
                if (currentPage < pages) {
                    currentPage++;
                    $.get("/travels", {
                        "isPublic": true,
                        "state": 2,
                        authorId: authorId,
                        currentPage: currentPage
                    }, function (data) {
                        $.merge(list, data.list);
                        renderView($("#travels"), {list: list}, "/travelContent.html?id=");
                    });
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已到底部',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }

            }
        })

        $("#letterBtn").click(function () {
            if (authorId == user.id) {
                $(document).dialog({
                    content: '不能私信自己',
                });
            } else {
                location.href = "/mine/conversation.html?authorId=" + authorId;
            }

        })
        var strategyPages;
        var strategyCurrentPage = 1;
        var strategyList;

        //实现TA点评的回显
        function renderStrategyView(data) {
            $("#comments").renderValues(data, {
                getStar: function (ele, value) {
                    $(".comment-star").html("");
                    for (var i = 0; i < value; i++) {
                        $(".comment-star").append($("<i class='fa fa-star'></i>"));
                    }
                    for (var i = 0; i < 5 - value; i++) {
                        $(".comment-star").append($("<i class='fa fa-star-o'></i>"));
                    }
                }, change: function (ele, value) {
                    ele.href = "/strategyComment.html?id=" + value;
                }, getStrategy: function (ele, value) {
                    ele.href = "/strategyCatalogs.html?id=" + value;
                }
            });
        }

        $.get("/users/" + authorId + "/strategyComments", {"state": 2}, function (data) {
            strategyPages = data.pages;
            strategyList = data.list;
            // $("#comments").renderValues(data, {
            //     getStar: function (ele, value) {
            //         $(".comment-star").html("");
            //         for (var i = 0; i < value; i++) {
            //             $(".comment-star").append($("<i class='fa fa-star'></i>"));
            //         }
            //         for (var i = 0; i < 5 - value; i++) {
            //             $(".comment-star").append($("<i class='fa fa-star-o'></i>"));
            //         }
            //     }, change: function (ele, value) {
            //         ele.href = "/strategyComment.html?authorId=" + value;
            //     }, getStrategy: function (ele, value) {
            //         ele.href = "/strategyCatalogs.html?id=" + value;
            //     }
            // });
            renderStrategyView(data);
        })
        $(window).scroll(function () {
            if (isEnd()) {
                if (strategyCurrentPage < strategyPages) {
                    strategyCurrentPage++;
                    $.get("/users/" + authorId + "/strategyComments",
                        {currentPage: strategyCurrentPage, "state": 2}, function (data) {
                            $.merge(strategyList, data.list);
                            renderStrategyView({list:strategyList});
                        });
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已到底部',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }

            }
        })
        //查询该作者名下所有的攻略点评
        $.get("/strategies/" +authorId+ "/commentCounts" ,{"state": 2},function (data) {
            $("#countComments").html(data);
        })
    })
</script>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span id="focus">1</span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span id="focused">0</span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-danger ibtn" id="letterBtn">私信</button>
                    <button class="btn ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span id="countTravels"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span id="countComments"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">

            <dl class="list" render-loop="list">
                <dd>
                    <a href="travelContent.html" data-id="2" render-key="list.id" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 				<span render-key="list.id" render-fun="manage">0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>

                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.star" render-fun="getStar">
                              </span>

                        <span class="comment-date" render-html="list.releaseTime">2018-07-11</span>
                        <div class="comment-content">
                            <a href="strategyComment.html" data-id="4" render-key="list.id" render-fun="change">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.commentImages">
                            <li>
                                <img render-src="list.commentImages.image">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a href="strategyCatalogs.html" data-id="2" render-key="list.strategy.id"
                               render-fun="getStrategy">
                                <img render-src="list.strategy.coverUrl"> <span
                                    render-html="list.strategy.title">广州攻略</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>